<template>
    <div>
        <div style="width: 100%">
            <label>智能清单</label>
            <a-icon type="plus" style="float: right;padding-right: 8px" @click="addInitSmart"  />
        </div>
        <div style="width:230px;height:200px;overflow-x:auto">
            <a-list size="small" item-layout="horizontal" :data-source="leftUpData">
                <a-list-item slot="renderItem" @mousedown="" slot-scope="item, index" v-bind:class="{list_select:item.nslId==queryParam.nsl_id?true:false}" @click="queryPageListBySmart(item.nslId)" style="cursor:pointer">
                    <a-list-item-meta>
                        <a slot="title" :class="{'smartColor':queryParam.nslId==item.nslId}">{{item.nslName}}</a>
                        <a slot="title" style="float: right;margin-right: 10px;color: #00A0E9">
                            <a-popconfirm title="确定删除吗?" @confirm="deleteById(item.nslId)">
                                <a-tooltip type="tmpStyle" class="menu-item" title="删除">
                                    <a-icon type="minus-circle-o"/>
                                </a-tooltip>
                            </a-popconfirm>
                        </a>
                        <a slot="title" style="float: right;margin-right: 10px;color: #00A0E9"
                           @click.stop="addInitSmart(item.nslId)">
                            <a-tooltip type="tmpStyle" class="menu-item" title="修改">
                                <a-icon type="edit"/>
                            </a-tooltip>
                        </a>
                    </a-list-item-meta>
                </a-list-item>
            </a-list>
        </div>
        <!--添加智能表单的弹出表单-->
        <a-modal
                width="520px"
                :visible="visible"
                @ok="smartSaveOrUpdate"
                @cancel="handleCancel"
                style="text-align: left;">

            <div>
                <a-row>
                    <a-col :span="4">名称</a-col>
                    <a-col :span="20">
                        <a-input style="margin-bottom:10px;width: 100%" v-model="neSmartListData.nsl_name" placeholder="请输入"/>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="4">
                        标签
                    </a-col>
                    <a-col :span="20">
                        <div style="width: 100%">
                        <template v-for="(tag, index) in rightTags">
                                <a-tag :key="tag.nl_id" @close="() => deleteLable(tag)" :closable="true">
                                    {{tag.nl_name}}
                                </a-tag>
                        </template>
                        </div>
                        <a-icon type="plus" @click="openLable"/>

                        <LableList :note="note"
                                   :defaultValue="tags"
                                   @change="setLable"
                                   ref="LableList"/>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="4">
                        类型
                    </a-col>
                    <a-col :span="20">
                        <a-checkbox-group  :options="noteType" :value="neSmartListData.neSmartListDetailMap.key2.v2_values" style="margin-top: 10px;width: 100%" @change="onChange2">
                        </a-checkbox-group>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="4">
                        时间
                    </a-col>
                    <a-col :span="20">
                        <a-select default-value="选择" style="margin-top: 10px;width: 100%" v-model="neSmartListData.neSmartListDetailMap.key3.v1">
                            <a-select-option value="1">
                                今天
                            </a-select-option>
                            <a-select-option value="2">
                                明天
                            </a-select-option>
                            <a-select-option value="3">
                                本周
                            </a-select-option>
                            <a-select-option value="4">
                                本月
                            </a-select-option>
                            <a-select-option value="5">
                                今年
                            </a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="4">
                        紧急程度
                    </a-col>
                    <a-col :span="20">
                        <a-checkbox-group :value="neSmartListData.neSmartListDetailMap.key4.v2_values" style="margin-top: 10px;width: 100%" @change="onChange23">
                            <a-row>
                                <a-col :span="7">
                                    <a-checkbox value="1">
                                        重急
                                    </a-checkbox>
                                </a-col>
                                <a-col :span="7">
                                    <a-checkbox value="2">
                                        轻急
                                    </a-checkbox>
                                </a-col>
                                <a-col :span="7">
                                    <a-checkbox value="3">
                                        重缓
                                    </a-checkbox>
                                </a-col>
                                <a-col :span="7">
                                    <a-checkbox value="4">
                                        轻缓
                                    </a-checkbox>
                                </a-col>
                            </a-row>
                        </a-checkbox-group>
                    </a-col>
                </a-row>
            </div>

        </a-modal>

<!--        &lt;!&ndash;添加智能表单中的标签弹出树杈&ndash;&gt;
        <a-modal    :visible="visible2"
                    centered
                    width="260px"
                    :footer="null"
                    @cancel="handleCancel2"
                    style="text-align: center;">

            <a-list size="small" style="width:230px;height:400px;overflow-y:auto" item-layout="horizontal" :data-source="neLableList">
                <a-list-item slot="renderItem" slot-scope="item, index" >
                    <a-list-item-meta>
                        <a slot="title" @click="queryPageListByLableId(item)">{{ item.nl_name }}</a>
                    </a-list-item-meta>
                </a-list-item>
            </a-list>
        </a-modal>-->



        <!--弹出菜单3-->
        <a-modal
                :visible="visible3"
                centered
                @cancel="handleCancel3"
                @ok="treeAddEdit"
                style="text-align: center;">
            <br>
            <h4 style="position: absolute;margin-top: 4px;margin-left: 65px;">名称：</h4>
            <a-input style="margin-bottom:10px;width: 250px" v-model="leftFrom.nameA" placeholder="请输入"/>
            <div>
                <a-radio-group :style="tagFlag" v-model="leftFrom.value">
                    <a-radio :value="1" v-if="tmpStyle.nlSort!=0">
                        同级
                    </a-radio>
                    <a-radio :value="2">
                        下级
                    </a-radio>
                </a-radio-group>
            </div>
        </a-modal>
    </div>
</template>

<script>
    import LableList from "@/components/LableList";
    import { postAction,getAction  } from '@/api/dl'
    //中间显示的表
    const columns = [
        {
            title: '标题',
            dataIndex: 'nnTitle',
            key: 'nnTitle',
            align: 'left',
            ellipsis: true,
        },
        {
            title: '时间',
            dataIndex: 'nnUptime',
            key: 'nnUpime',
            align: 'right'
        },
    ];
    //云记类型
    const noteType = [
        { label: '任务', value: '2'  },
        { label: '笔记', value: '1' }
    ];
    //
    const neSmartListDetailMapNull={
        "key1":{"v1":"","v2":""},//标签
        "key2":{"v1":"","v2":"","v2_values":[]},//类型
        "key3":{"v1":"","v2":""},//时间
        "key4":{"v1":"","v2":"","v2_values":[]},//紧急程度
    }

    export default {
        name: "SmartList",
        components: {
            LableList
        },
        props: {
            neLableList:{
                type: Array,
                default: ''
            },
            queryParam:{
                type: Object,
                default: ''
            },
            note:{
                type: Object,
            },
        },
        data(){
            return {
                tags:[],//标签id串树
                rightTags:[],//标签对象树
                neSmartListDetailMapNull,
                neSmartListData:{
                    "neSmartListDetailMap":neSmartListDetailMapNull
                },
                //用与选择标签树的展示
                openLableTree:[],
                //用于存放智能表单的值，修改和添加的值
                leftFrom: {
                    //标签表名称
                    nameA: '',
                    //智能表名称
                    name: '',
                    nsldVal5: '',
                    nsldVal4: ''
                },
                //用于存放智能表单的值，修改和添加的值
                leftB: {},
                //存的是树杈的标签中文
                smartTag: [],
                //智能表单的数据
                leftUpData: [],
                //添加智能表单的弹出表单
                visible: false,
                //添加智能表单中的标签弹出树杈
                //笔记树显示名称和时间
                columns,
                noteType,

                //用于存放标签树修改和添加保存的值
                tmpStyle: {},
                //用于存放标签树修改和添加保存的值
                tmpStyle2: {},
                //添加标签树的弹出表单
                visible3: false,
                tagFlag: '',
                visible2: false,
                //智能表单的类型
                multiple: [],
                //智能表单的类型
                multiple2: [],
                //智能表单 条件表的id
                id: [0, 0, 0, 0],
            }
        },
        methods:{
            /**
             * 删除标签与智能清单关系
             */
            deleteLable(lable){
                let nl_ids=lable.nl_id;
                let taht=this;
                postAction('smart/deleteSmartLable',{
                    nl_ids:nl_ids,
                    nsl_id:taht.neSmartListData.nsl_id
                }).then(res=>{
                    this.findById(taht.neSmartListData.nsl_id);
                });
            },
            /**
             * 回调方法
             */
            setLable(ids){
                this.neSmartListData.neSmartListDetailMap.key1.v1=ids.join(",");
                postAction("smart/saveOrUpdate", this.neSmartListData).then((res) => {
                    this.findById(res.data.nsl_id);
                    this.findLableBy(res.data.nsl_id);
                })
            },
            queryPageListBySmart(nslId){
                this.$emit('queryPageListBySmart',nslId);
            },


            //删除智能表
            deleteById(ke) {
                getAction("smart/delect?" + "id=" + ke).then((res) => {
                    //清空已选择的条件
                    if(ke==this.queryParam.nslId){
                        this.queryParam.nslId = 0;
                        this.querySmart(1)
                    }
                    this.querySmartLable();
                })
            },
            //开启智能表单弹出菜单
            addInitSmart(id) {
                if (id > 0) {//编辑
                    this.findLableBy(id);
                    this.findById(id);
                } else {
                    this.tags=[];
                    this.rightTags=[];
                    this.neSmartListData={};
                    this.neSmartListData.neSmartListDetailMap=this.neSmartListDetailMapNull;

                }
                this.visible = true;
            },
            /**
             * 根据智能清单id查询所有所属标签
             */
            findLableBy(id){
                getAction(`note/lable-note/queryLableByNslId/${id}`,{}).then((res) => {
                    this.rightTags=res.data;
                })
            },
            findById(id){
                postAction("smart/findById",{"nsl_id":id}).then((res) => {
                    let map=res.data.neSmartListDetailMap;
                    //为空处理
                    if(Object.keys(map).length==0||!map.key1)res.data.neSmartListDetailMap.key1=this.neSmartListDetailMapNull.key1;//标签
                    if(Object.keys(map).length==0||!map.key2)res.data.neSmartListDetailMap.key2=this.neSmartListDetailMapNull.key2
                    if(Object.keys(map).length==0||!map.key3)res.data.neSmartListDetailMap.key3=this.neSmartListDetailMapNull.key3
                    if(Object.keys(map).length==0||!map.key4)res.data.neSmartListDetailMap.key4=this.neSmartListDetailMapNull.key4

                    this.tags=map.key1.v1.split(',')
                    this.neSmartListData=res.data;
                })
            },
            //弹出智能表单的标签树
            openLable() {
                this.$refs.LableList.load();
            },
            //开启树标签弹出菜单
            addInitSmart3(ke, i) {
                console.log("树标签弹出菜单",ke);
                this.tmpStyle = ke
                //判断是修改还是添加
                if (i == 1) {
                    //修改
                    this.leftFrom.nameA = this.tmpStyle.nlName
                    this.tagFlag = 'display:none'
                    this.leftFrom.ABC = 1
                }
                if (i == 3) {
                    //添加
                    this.leftFrom.nameA = ''
                    this.leftFrom.ABC = 3
                    this.tagFlag = ''
                }
                this.visible3 = true;
            },
            //通过Id查找智能表
            selectSmartId(nslId) {
                //第一次点击选中，第二次点击取消
                this.queryParam.nslId = this.queryParam.nslId == nslId ? 0 : nslId;
                this.querySmart(1);
            },
            querySmart(status,newCreate) {

                //1表示条件更变（被点击）
                if(status==1){
                    this.pagination.current = 1;
                    this.queryParam.page = 1;
                }

                this.queryParam.default = 0;
                this.initQueryParam();
                postAction(`note/selectSmartId/${this.queryParam.page}/${this.queryParam.size}?nslId=${this.queryParam.nslId}&nlId=${this.queryParam.nlId}&value=${this.queryParam.value}`).then((res) => {
                    this.selectResult(res,newCreate);
                })
            },
            /**
             * 根据智能清单查询云记
             */
            querySmartLable() {
                postAction('smart/select').then((res) => {
                    this.leftUpData = res.result
                })
            },
            //关掉添加智能表单的弹出表单
            handleCancel(e) {
                this.visible = false;
            },
            //关掉添加智能表单中的标签弹出树杈弹窗表单
            handleCancel2(e) {
                this.visible2 = false;
            },
            /**
             * 保持或更新智能表单
             */
            smartSaveOrUpdate() {
                postAction("smart/saveOrUpdate", this.neSmartListData).then((res) => {
                    this.visible = false;
                    this.querySmartLable();//智能表
                    this.findById(res.data.nsl_id);
                })
                this.visible = false;
            },
            //笔记类型
            onChange2(checkedValues) {
                this.neSmartListData.neSmartListDetailMap.key2.v2_values=checkedValues;
                this.neSmartListData.neSmartListDetailMap.key2.v1=checkedValues.join(",");
            },
            //紧急程度
            onChange23(value) {
                this.neSmartListData.neSmartListDetailMap.key4.v2_values=value;
                this.neSmartListData.neSmartListDetailMap.key4.v1=value.join(",");
            },








            //添加树标签和修改  修改智能表单
            treeAddEdit() {
                if(!(this.leftFrom.nameA!=null&&this.leftFrom.nameA.length>0&&this.leftFrom.nameA.length<10)){
                    this.$message.warning('标签名不能为空或超过10位！');
                    return;
                }
                this.tmpStyle2.nlName = this.leftFrom.nameA
                this.tmpStyle2.nlUId = this.tmpStyle.nlId
                //修改树标签
                if (this.leftFrom.ABC == 1) {
                    this.tmpStyle2.nlId = this.tmpStyle.nlId
                    this.tmpStyle2.nlUId = this.tmpStyle.nlUId
                    postAction("nelable/update", this.tmpStyle2).then((res) => {
                        this.querySmartLable();//智能表
                        this.queryLable();
                    })
                }
                //添加树标签
                if (this.leftFrom.ABC == 3) {
                    //同级
                    if (this.leftFrom.value == 1) {
                        this.tmpStyle2.nlUId = this.tmpStyle.nlUId
                    }
                    postAction("nelable/save", this.tmpStyle2).then((res) => {
                        this.queryLable();
                    })
                }
                this.visible3 = false;
            },
            //删除树标签
            treeDelect(ke) {
                getAction("nelable/delect?" + "id=" + ke).then((res) => {
                    this.queryLable();
                })
            },
            //移动树标签
            onDrop(info) {
                const dropKey = info.node.eventKey;
                const dragKey3 = info.node.$vnode.data.props;
                //被放置对象全部属性
                this.dropKey2[1] = info.node.$vnode.data.props.nlId;
                this.dropKey2[2] = info.node.$vnode.data.props.nlSort;
                this.dropKey2[3] = info.node.$vnode.data.props.nlUId;
                const dragKey = info.dragNode.eventKey;
                const dragKey2 = info.dragNode.$vnode.data.props;
                //操作拖动对象全部属性
                this.dropKey2[5] = info.dragNode.$vnode.data.props.nlId;
                this.dropKey2[6] = info.dragNode.$vnode.data.props.nlSort;
                this.dropKey2[7] = info.dragNode.$vnode.data.props.nlUId;
                const dropPos = info.node.pos.split('-');
                const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
                console.log("被操作对象", dropKey)
                console.log("被操作对象全部属性", dragKey3)
                console.log("操作对象", dragKey)
                console.log("操作对象全部属性", dragKey2)
                console.log("动作，移动后面是1，前面是-1，变成子集是0", dropPosition)
                this.dropKey2[8] = dropPosition;
                postAction("nelable/moveUpdate?" + "i=" + this.dropKey2).then((res) => {
                    this.queryLable();
                })
            },
            //递归添加插槽
            appendEdit(list) {
                for (let i = 0; i < list.length; i++) {
                    list[i].scopedSlots = {title: "custom"};
                    if (list[i].childList.length > 0) {
                        this.appendEdit(list[i].childList);
                    }
                }
            },
            //点击添加智能表单删选的树节点事件
            onSelect2(keys, event) {
                this.checkedKeys = keys.checked

                //解决输入重复的时候就去掉重复的
                let index = -1;
                for (let i = 0; i < this.smartTag.length; i++) {
                    if (this.smartTag[i] == event.node.title) {
                        index = i;
                    }
                }
                if (index == -1) {
                    if(this.smartTag==""){
                        this.smartTag = [];
                    }
                    this.smartTag.push(event.node.title)
                } else {
                    this.smartTag.splice(index, 1);
                }
            },
            //添加智能表单中的标签树杈点击事件
            onExpand2(leftExpandedKeys) {
                this.leftExpandedKeys2 = leftExpandedKeys;
                this.leftAutoExpandParent2 = false;
            },
            //关掉标签树杈弹窗表单
            handleCancel3(e) {
                this.visible3 = false;
            },
        }
    }
</script>

<style scoped>

</style>